<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>注册 -觅TA网</title>
    <meta name="description" content=""> 
    <meta name="robots" content="all,follow">
    <!-- Bootstrap CSS-->
    <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/4.2.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:300,400,700">
    <link rel="stylesheet" href="css/style.default.css" id="theme-stylesheet">
	<style>
          #register-code.input-material.form-control{
              display: inline-block;
          }
	</style>
  </head>
  <body>
    <div class="page login-page">
      <div class="container d-flex align-items-center">
        <div class="form-holder has-shadow">
          <div class="row">
            <!-- Logo & Information Panel-->
            <div class="col-lg-6">
              <div class="info d-flex align-items-center">
                <div class="content">
                  <div class="logo">
                    <h1>欢迎注册</h1>
                  </div>
                  <p>Welcome To Register</p>
                </div>
              </div>
            </div>
            <!-- Form Panel    -->
            <div class="col-lg-6 bg-white">
              <div class="form d-flex align-items-center">
                <div class="content">
                    <div class="form-group">
                      <input id="register-username" class="input-material" type="text" name="username" placeholder="请输入用户名/姓名" >
								      <div class="invalid-feedback" id="username_error">
								        	用户名必须在2~10位之间
								      </div>
                    </div>
                    <div class="form-group">
                      <input id="register-password" class="input-material" type="password" name="password" placeholder="请输入密码"   >
                    	<div class="invalid-feedback">
								        	密码必须在6~16位之间
								      </div>
                    </div>
                    <div class="form-group">
                      <input id="register-passwords" class="input-material" type="password" name="rePassword" placeholder="确认密码"   >
                    	<div class="invalid-feedback">
								        	两次密码必须相同 且在6~16位之间
								      </div>
                    </div>
                    <div class="form-group">
                      <input id="register-tel" class="input-material" type="text" name="tel" required placeholder="手机号码"   >
                    	<div class="invalid-feedback" id="tel_error">
							手机号不存在
						</div>
                        <#--<div style="color: #dc3545;font-size: 13px" id="tel_error"></div>-->
                    </div>
                    <div class="form-group">
                      	<input id="register-code" class="input-material" style="width: 65%;" type="text" name="code" placeholder="短信验证码" >
						<button type="button" class="btn btn-primary" style="float: right;" id="sendBtn">获取验证码</button>
						<div class="invalid-feedback" id="code-error">
                        	验证码不能为空
                    	</div>
                    </div>
                    <div class="form-group">
                      <button id="regbtn" type="submit" name="registerSubmit" class="btn btn-primary">注册</button>
                    </div>
                  <small>已有账号?</small><a href="/login" class="signup">&nbsp;登录</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- JavaScript files-->
    <script src="https://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <script src="https://ajax.aspnetcdn.com/ajax/bootstrap/4.2.1/bootstrap.min.js"></script>
    <script src="layui/layui.js"></script>
    <script>
    	$(function(){
    		/*错误class  form-control is-invalid
    		正确class  form-control is-valid*/
    		var flagName=false;
    		var flagPas=false;
    		var flagPass=false;
    		var flagTel=false;
			var flagCode=false;
    		/*验证用户名*/
    		var name,passWord,passWords,tel,code;
    		$("#register-username").change(function(){
    			name=$("#register-username").val();
    			if(name.length<2||name.length>10){
                    $("#username_error").text("用户名必须在2~10位之间");
    				$("#register-username").removeClass("form-control is-valid")
    				$("#register-username").addClass("form-control is-invalid");
    				flagName=false;
    			}else{
                    $.ajax({
                        type:'post',
                        url:'/checkUsername',
                        data:{username:name},
                        success:function (ret) {
                            if (ret) {
                                $("#username_error").text("该用户名已存在");
                                $("#register-username").removeClass("form-control is-valid")
                                $("#register-username").addClass("form-control is-invalid");
                                flagName = false;
                            }else {
                                $("#register-username").removeClass("form-control is-invalid")
                                $("#register-username").addClass("form-control is-valid");
                                flagName=true;
                            }
                        }
                    });

    			}
    		})
    		/*验证密码*/
    		$("#register-password").change(function(){
    			passWord=$("#register-password").val();
    			if(passWord.length<6||passWord.length>16){
    				$("#register-password").removeClass("form-control is-valid")
    				$("#register-password").addClass("form-control is-invalid");
    				flagPas=false;
    			}else{
    				$("#register-password").removeClass("form-control is-invalid")
    				$("#register-password").addClass("form-control is-valid");
    				flagPas=true;
    			}
    		})
    		/*验证确认密码*/
    		$("#register-passwords").change(function(){
    			passWords=$("#register-passwords").val();
    			if((passWord!=passWords)||(passWords.length<6||passWords.length>16)){
    				$("#register-passwords").removeClass("form-control is-valid")
    				$("#register-passwords").addClass("form-control is-invalid");
    				flagPass=false;
    			}else{
    				$("#register-passwords").removeClass("form-control is-invalid")
    				$("#register-passwords").addClass("form-control is-valid");
    				flagPass=true;
    			}
    		})
    		
    		/*验证手机号*/
            $("#register-tel").change(function(){
                tel=$("#register-tel").val();
                var length = tel.length;
                var mobile = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1}))+\d{8})$/;
                //console.log(mobile.test(tel));
                if(length == 11 && mobile.test(tel)){
                    $("#register-tel").removeClass("form-control is-invalid")
                    $("#register-tel").addClass("form-control is-valid");

                    flagTel=true;
                } else{
                    $("#tel_error").text("手机号不存在")
                    $("#register-tel").removeClass("form-control is-valid")
                    $("#register-tel").addClass("form-control is-invalid");
                    flagTel=false;
                }
            });

            /*验证验证码*/
            /*$("#register-code").change(function(){
                code=$("#register-code").val();
                if(code != ""&&!flagCode){
                    $("#register-code").removeClass("form-control is-invalid")
                    $("#register-code").addClass("form-control is-valid");
                    flagCode=true;
                }else{
                    $("#register-code").removeClass("form-control is-valid")
                    $("#register-code").addClass("form-control is-invalid");
                    flagCode=false;
                }
            })*/

            var sms,regCount=3,codeRange=true,i= 0,life;
            $("#regbtn").click(function(){
                console.log("验证码"+sms);
                console.log("用户输入"+$("#register-code").val());
                //验证点击注册按钮时手机号是否空
                if($("#register-tel").val()==""){
                    $("#tel_error").text("请输入手机号码")
                    $("#register-tel").removeClass("form-control is-valid")
                    $("#register-tel").addClass("form-control is-invalid");
                    flagTel=false;
                }
                //验证验证码是否空
                if($("#register-code").val()==""){
                    $("#code-error").text("验证码不能为空")
                    $("#register-code").removeClass("form-control is-valid")
                    $("#register-code").addClass("form-control is-invalid");
                    flagCode=false;
                }else {
                        //验证用户输入的短信验证码是否正确
                        if($("#register-code").val()!=sms){
                            $("#code-error").text("验证码错误，您还有"+regCount+"次重试机会");
                            $("#register-code").removeClass("form-control is-valid")
                            $("#register-code").addClass("form-control is-invalid");
                            flagCode=false;
                            if(regCount<1){
                                $("#code-error").text("验证码错误，尝试失败次数过多，请重新发送验证码");
                                codeRange=false;
                                $("#register-code").removeClass("form-control is-valid")
                                $("#register-code").addClass("form-control is-invalid");
                                flagCode=false;
                            }
                            //console.log(regCount);
                            regCount=regCount-1;
                        }else{
                            if(i>=300) {
                                $("#code-error").text("验证码已失效，请重新发送验证码");
                                $("#register-code").removeClass("form-control is-valid");
                                $("#register-code").addClass("form-control is-invalid");
                                flagCode = false;
                            }else {
                                if(codeRange){
                                    $("#register-code").removeClass("form-control is-invalid");
                                    $("#register-code").addClass("form-control is-valid");
                                    flagCode=true;
                                }
                            }


                        }

                }
                var username=$("#register-username").val();
                //alert($("#register-code").val()=="");
                if(flagName&&flagPas&&flagPass&&flagTel&&flagCode){

                    var user={username:$('#register-username').val(),password:$("#register-password").val(),tel:$("#register-tel").val()};
                    //提交用户注册信息
                    //alert(JSON.stringify(user));
                    $.ajax({
                        url:'/submitReg',
                        type:'post',
                        data:JSON.stringify(user),
                        contentType: "application/json; charset=utf-8",
                        success:function (ret) {
                            layui.use('layer', function(){
                                var layer = layui.layer;
                                layer.open({
                                    type:'0',
                                    title: '注册成功',
                                    btn:['确认','取消'],
                                    closeBtn:0,
                                    content: '是否去登陆？',
                                    yes: function(index, layero){
                                        location="/login";
                                        layer.close(index);
                                    },
                                    btn2:function () {
                                        location="/index";
                                    }
                                });
                            });
                        }

                    });
                }else{
                    //console.log("用户名："+flagName);
                    if(!flagName){
                        $("#register-username").addClass("form-control is-invalid");
                    }
                    if(!flagPas){
                        $("#register-password").addClass("form-control is-invalid");
                    }
                    if(!flagPass){
                        $("#register-passwords").addClass("form-control is-invalid");
                    }if(!flagTel){
                        $("#register-tel").addClass("form-control is-invalid");
                    }if(!flagCode){
                        $("#register-code").addClass("form-control is-invalid");
                    }
                }



            });
            var ordertime=60   //设置再次发送验证码等待时间
            var timeleft=ordertime
            var btn=$("#sendBtn");
            //计时函数
            function timeCount(){
                timeleft-=1;
                if (timeleft>0){
                    btn.attr("disabled",true);
                    btn.text("重新发送("+timeleft+"s)");
                    setTimeout(timeCount,1000)
                }
                else {
                    btn.text("获取验证码");
                    timeleft=ordertime   //重置等待时间
                    btn.removeAttr("disabled");
                }
            }

            //如果时间超过5分钟，暂定定时器
            function　codeLife(){
                i=i+1;
                console.log(i);
                if(i>300){
                    clearInterval(life);
                }
            }

            //事件处理函数
            btn.on("click",function(){
                if($("#register-tel").val()==""){
                    $("#tel_error").text("请输入手机号码")
                    $("#register-tel").removeClass("form-control is-valid")
                    $("#register-tel").addClass("form-control is-invalid");
                    flagTel=false;
                }
                if(flagTel){
                    if(!flagCode){
                        $("#register-code").removeClass("form-control is-invalid");
                    }
                    codeRange=true;
                    regCount=3;
                    tel=$("#register-tel").val();
                    //检查用户输入的手机号是否被注册
                    $.ajax({
                        type:'post',
                        url:'/checkTel',
                        data:{tel:tel},
                        success:function (ret) {
                            if(ret){
                                $("#tel_error").text("该手机号码已被注册");
                                $("#register-tel").removeClass("form-control is-valid")
                                $("#register-tel").addClass("form-control is-invalid");
                                flagTel=false;
                            }else {
                                layui.use('layer', function(){
                                    var layer = layui.layer;
                                    layer.msg('短信验证码已发送');
                                });
                                $(this).attr("disabled",true); //防止多次点击
                                //获取后台发送给用户的验证码
                                $.ajax({
                                    type:'post',
                                    url:'/sendSMS',
                                    data:{tel:tel},
                                    success:function (ret) {
                                        sms=ret;
                                        i=0;
                                        life=setInterval(codeLife,1000);
                                    }
                                });
                                timeCount(this);
                            }
                        }
                    });
                }
            });

    	})
    </script>
  </body>
</html>